import router from '@/router' //引入路由实例
import store from '@/store' //引入store实例
import nprogress from 'nprogress' //引入一条进度条
import 'nprogress/nprogress.css' //引入进度条样式
//不需要导出，因为只需要代码执行
//前置守卫
// next是前置守卫必须执行的钩子  next必须执行 如果不执行 页面就会死掉
//next（）是放过
//next（false）跳转终止
// next(地址) 跳转到某个页面
//自定义一个白名单
const whiteList = ['/login', '/404'] //也就是不需要token就能访问的页面
router.beforeEach(async (to, from, next) => {
    nprogress.start() //开启进度条
    if (store.getters.token) { //有token的情况
        //才能去获取资料
        //有token并且判断如果是登录页则跳转到主页
        if (to.path == '/login') {
            next('/')
        } else { //否则原地放行
            //放过的时候才获取用户资料，但不是每次都获取
            //如果当前的vuex中有用户的id才表示已经资料了 如果没有id 则获取资料
            if (!store.getters.userId) {
                // 如果没有id才表示当前用户资料没有获取过
                // async 函数所return的内容 用 await就可以接收到
                const { roles } = await store.dispatch('user/getUserInfo')
                // 如果说后续 需要根据用户资料获取数据的话 这里必须改成 同步
                // 筛选用户的可用路由
                // actions中函数 默认是Promise对象 调用这个对象 想要获取返回的值话 必须 加 await或者是then
                // actions是做异步操作的
                const routes = await store.dispatch('permission/filterRoutes', roles.menus)
                // routes就是筛选得到的动态路由
                // 动态路由 添加到 路由表中 默认的路由表 只有静态路由 没有动态路由
                // addRoutes  必须 用 next(地址) 不能用next()
                router.addRoutes([...routes,{ path: '*', redirect: '/404', hidden: true }]) // 添加动态路由到路由表  铺路
                // 添加完动态路由之后
                next(to.path) // 相当于跳到对应的地址  相当于多做一次跳转 为什么要多做一次跳转
                // 进门了，但是进门之后我要去的地方的路还没有铺好，直接走，掉坑里，多做一次跳转，再从门外往里进一次，跳转之前 把路铺好，再次进来的时候，路就铺好了
            }else{
                next()
            }
        }
    } else { //没有token的情况
        if (whiteList.indexOf(to.path) > -1) { //如果在白名单，则原地放行
            next()
        } else { //判断如果不在白名单，则跳转回登录页
            next('/login')
        }
    }
    nprogress.done() //解决了手动跳转登录页，进度条不关闭的问题
})
//后置守卫
router.afterEach(() => {
    nprogress.done() //关闭进度条
})